<template>
  <div class="common-wrap">
    <vue-monaco-editor
      ref="editorRef"
      theme="vs-dark"
      language="html"
      :options="editorOptions"
      v-model:value="contents"
      @mount="handleMount"
    />
  </div>
</template>

<script setup>
import { VueMonacoEditor } from "@guolao/vue-monaco-editor";
import { ref, watch, onMounted, shallowRef, onActivated } from "vue";
const props = defineProps({
  htmlContent: {
    type: String,
    default: "",
  },
});
const emits = defineEmits(["update:htmlContent"]);
const editor = shallowRef();
const contents = computed({
  get() {
    return props.htmlContent;
  },
  set(val) {
    emits("update:htmlContent", val);
  },
});
onActivated(() => {
  // handleMount();
});
const editorOptions = ref({
  automaticLayout: true,
  formatOnType: true,
  formatOnPaste: true,
});

const handleMount = (editorInstance) => {
  if (editorInstance) {
    editor.value = editorInstance;
  }
  editor.value?.getAction("editor.action.formatDocument").run();
};
onMounted(() => {});
</script>

<style lang="scss" scoped>
</style>